{extend name="public:base" /}

{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-content">
                    <form method="post" class="ajax-form" action="{:url('add','json')}">
                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">管理员账号</label>
                                <div class="col-sm-3">
                                    <input type="text" name="account" id="account"
                                           autocomplete="off"
                                           value=""
                                           class="form-control required-validate" placeholder="请输入企业管理员账号">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>
                        <div class="box-item">
                            <div class="form-group row"><label class="col-sm-1 col-form-label">管理员密码</label>
                                <div class="col-sm-3">
                                    <input type="password" placeholder="请输入管理员密码" class="form-control" name="password">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>
                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">企业名称</label>
                                <div class="col-sm-3">
                                    <input type="text" name="name" id="accountCheckIdentity"
                                           autocomplete="off"
                                           value=""
                                           class="form-control required-validate" placeholder="请输入企业名称">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>
                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">联系号码</label>
                                <div class="col-sm-3">
                                    <input type="text" name="mobile"
                                           autocomplete="off"
                                           value=""
                                           class="form-control required-validate" placeholder="请输入联系号码">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>
                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">企业封面</label>
                                <div class="col-sm-8">
                                    <div style="position: relative;cursor: pointer;" class="sealImg">
                                        <input type="file" id="BannarImgId" style="display: none;" name="BannarImgId">
                                        <input type="hidden" class="required-validate" name="img">
                                        <div class="upload-file img-upload">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>
                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">企业图片</label>
                                <div class="col-sm-8">
                                    <div style="display: none" id="uploadedfiles">
                                        <input type="hidden" name="imgs" value="{$row.imgs}">
                                        {volist name="imgFiles" id="vo"}
                                        <img src="{$vo.path}" data-id="{$vo.id}">
                                        {/volist}
                                    </div>
                                    <div class="dropzone" id="myDropzone">
                                        <div class="dz-default dz-message">
                                            <span><h3><i class="fa fa-cloud-upload"></i>在这里删除文件或点击上传。</h3>将文件拖拽到此处，或点此打开文件管理器选择文件</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>
                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">服务到期时间</label>
                                <div class="col-sm-3">
                                    <div class="input-group dateTime">
                                        <input type="text"
                                               class="form-control form-control-sm datepicker required-validate"
                                               placeholder="请输入服务到期时间"
                                               readonly
                                               id="service_expiration_time"
                                               name="service_expiration_time" value="{$row.service_expiration_time}">
                                        <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
                                    </div>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>
                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">采购人<span class="check-tips"></span></label>
                                <div>
                                    <select name="market_user_id" class="select2" style="width:178px;">
                                        {volist name="user_list" id="vo"}
                                            <option value="{$vo['market_user_id']}"{if condition="$info['market_user_id'] == $vo['market_user_id']"}selected{/if}>{$vo['username']}</option>
                                        {/volist}

                                    </select>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                            
                        </div>
                        <div class="form-group row">
                            <div class="col-sm-4 col-sm-offset-2">
                                <button type="button" class="btn btn-w-m btn-default back-page">返回</button>
                                <button type="submit" class="btn btn-w-m btn-primary">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{/block}

{block name='js'}
<script type="text/javascript" src="__PLUG__/kindeditor/kindeditor-all.js"></script>
<script type="text/javascript" src="__ADMIN__/js/plugins/typehead/bootstrap3-typeahead.min.js"></script>
<script type="text/javascript" src="__ADMIN__/js/plugins/dropzone/dropzone.js"></script>"></script>
<script src="__ADMIN__/seelct2/jquery.min.js"></script>
<script src="__ADMIN__/seelct2/custom-select.min.js" type="text/javascript"></script>
<script>
    Dropzone.options.myAwesomeDropzone = false;
    Dropzone.autoDiscover = false;
    $(document).ready(function () {
        laydate.render({
            calendar: true,
            elem: '.datepicker' //指定元素
        });

        const drozone = new Dropzone("#myDropzone", {
            url: "{:url('UploadFile/uploadPicture',array('session_id'=>session_id()))}",
            addRemoveLinks: true,
            method: 'post',
            filesizeBase: 1024,
            sending: function (file, xhr, formData) {
                formData.append("filesize", file.size);
            },
            success: function (file, res, e) {
                console.log(res);
                // var res = JSON.parse(response);
                if (res.error) {
                    $(file.previewTemplate).children('.dz-error-mark').css('opacity', '1')
                } else {
                    addFileImgs(res.data[0].id)
                }
            }
        })

        function addFileImgs(id) {
            let imgsEl = $($("#uploadedfiles>input[type='hidden']")[0]);
            const ids = imgsEl.val().split(",");
            ids.push(id);
            imgsEl.val(ids.filter(item => !!item).join(","));
        }

        function removeFromImgs(id) {
            let imgsEl = $($("#uploadedfiles>input[type='hidden']")[0]);
            const ids = imgsEl.val().split(",");
            imgsEl.val(ids.filter((item) => item - id > 0).filter(item => !!item).join(","));
        }

        drozone.on("removedfile", function (e, i) {
            if (e.xhr) {
                var res = JSON.parse(e.xhr.response);
                const id = res.data[0].id;
                removeFromImgs(id)
            } else {
                const id = e.id
                removeFromImgs(id)
            }
        })
        $('.img-upload').on("click", function () {
            $("#BannarImgId").trigger("click");
        });
        $('#BannarImgId').change(function () {
            var pic = $(this)[0].files[0];
            var formData = new FormData();
            var url = "{:url('UploadFile/uploadPicture',array('session_id'=>session_id()))}";
            formData.append('download', pic);
            $.ajax({
                url: url,
                type: "post",
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                success: function (data) {
                    if (data.status === 1) {
                        //上传成功
                        var id = data.data[0].id;
                        var path = data.data[0].path;
                        $('input[name="img"]').val(id);
                        $('.img-upload').find("img").remove();
                        $('.img-upload').append('<img src="' + path + '" style="width: 100px;height: 100px;">');
                    } else {
                        layer.msg(data.info);
                    }
                }
            });
        });
		                                $(".select2").select2();
            $('.selectpicker').selectpicker();
    });
</script>
{/block}
{block name="css"}
<!--<link href="__ADMIN__/css/plugins/dropzone/basic.css" rel="stylesheet"></link>-->
<!--<link href="__ADMIN__/css/plugins/dropzone/multiupload.css" rel="stylesheet"></link>-->

<link href="__ADMIN__/css/plugins/dropzone/basic.css" rel="stylesheet"></link>
<link href="__ADMIN__/css/plugins/dropzone/dropzone.css" rel="stylesheet"></link>
<style type="text/css">
    /* Dropzone */
    .dropzone {
        min-height: 140px;
        border: 1px dashed #1ab394;
        background: white;
        padding: 20px 20px;
    }

    .dropzone .dz-message {
        font-size: 16px;
    }

    .dropzone .dz-preview .dz-image img {
        width: 100%;
        height: 100%;
    }
</style>
{/block}